<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增路线</title>
    <script src="./js/vue2.js"></script>
    <script src="./js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>添加旅游线路信息</h1>
        <div>
            <p>
                旅游线路名称:
                <input v-model="tourRoute.trName"/>
            </p>
            <p>
                类型:
                <input type="radio" name="trType" v-model="tourRoute.trType" value="1"/>自由行
                <input type="radio" name="trType" v-model="tourRoute.trType" value="2"/>跟团游
            </p>
            <p>
                价格:
                <input v-model="tourRoute.trPrice"/>
            </p>
            <p>
                景点:
                <span v-for="item in spots">
                    <input
                            :value="item.ssId"
                            v-model="tourRoute.spotList"
                            type="checkbox"/>{{item.ssName}}
                </span>
            </p>
            <p>
                咨询人:
                <input v-model="tourRoute.trUser"/>
            </p>
            <p>
                咨询电话:
                <input v-model="tourRoute.trPhone"/>
            </p>
            <p>
                <button @click="handleAddClick">添加</button>
                <button>返回</button>
            </p>
        </div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                spots:[],
                tourRoute:{
                    trName:'',
                    trType:'1',
                    trPrice:'',
                    trPhone:'',
                    trUser:'',
                    spotList:[]
                }
            },
            methods:{
                //加载景点列表
                loadSpots(){
                    axios.get('http://127.0.0.1:8080/spot/all').then(res => {
                        this.spots = res.data.data
                        console.log(this.spots)
                    })
                },
                handleAddClick(){
                    if(this.tourRoute.trName==''
                    ||this.tourRoute.trPhone==''
                    ||this.tourRoute.trPrice==''
                    ||this.tourRoute.trUser==''){
                        alert('请完整填写内容')
                        return
                    }
                    if(this.tourRoute.spotList.length==0){
                        alert('请选择景点')
                        return;
                    }
                    axios.post('http://127.0.0.1:8080/route/add',this.tourRoute)
                        .then(res =>{
                            if(res.data.success){
                                alert('添加路线成功')
                            }
                        }
                    )
                }
            },
            created(){
                this.loadSpots()
            }
        })
    </script>
</body>
</html>